<!--
 * @Author: 袁三金
 * @Date: 2024-03-18 21:50:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-19 00:01:36
 * @Description: 我的相册页面
-->
<template>
  <div class="all">
    <header class="header">
      <div class="header_left">全部相册</div>
    </header>
    <div class="image_main">
      <div
        class="demo-image__preview" v-for="item in imageList"
        @contextmenu.prevent="showContextMenu($event)"
        :key="item.id"
      >
        <div class="context_menu_container" v-show="showMenu">
          <div
            class="context_menu"
            :style="{ top: `${menuY}px`, left: `${menuX}px` }"
          >
            <ul class="context_menu_items">
              <li class="context_menu_item" @click="dialogNewFile = true">
                <div class="context_menu_item_icon">
                  <i class="el-icon-folder-add"></i>
                </div>
                <div class="context_menu_item_text">新建文件夹</div>
              </li>
              <li class="context_menu_item">
                <div class="context_menu_item_icon">
                  <i class="el-icon-upload2"></i>
                </div>
                <div class="context_menu_item_text" @click="showUploadFileFUn">
                  上传文件
                </div>
              </li>
              <li class="context_menu_item">
                <div class="context_menu_item_icon">
                  <i class="el-icon-refresh"></i>
                </div>
                <div class="context_menu_item_text" @click="refresh()">
                  刷新页面
                </div>
              </li>
            </ul>
          </div>
        </div>
        <el-image style="width: 170px; height: 170px" :src="item.url">
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        {
          id: 0,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 1,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 2,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 3,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 4,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 5,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
      menuX: 0, // 菜单的水平位置
      menuY: 0, // 菜单的垂直位置
    };
  },
  methods: {
    showContextMenu(event) {
      // 阻止默认的右键菜单
      event.preventDefault();
      // 获取鼠标位置
      this.menuX = event.clientX;
      this.menuY = event.clientY;
      // 显示右键菜单
      this.showMenu = true;

      // 监听鼠标点击事件，隐藏右键菜单
      document.addEventListener("click", this.hideContextMenu);
    },
    hideContextMenu() {
      // 隐藏右键菜单
      this.showMenu = false;
      // 移除鼠标点击事件监听
      document.removeEventListener("click", this.hideContextMenu);
    },
  },
};
</script>

<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 40px;
  padding-top: 24px;
  flex-direction: column;
  position: relative;
  .header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }
  .header_left {
    font-size: 18px;
    font-weight: 600;
    color: rgb(37, 38, 43);
  }
  .image_main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .context_menu_container {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;

      .context_menu {
        position: fixed;
        width: 150px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 13, 0, 0.5);
        border-radius: 5px;
        padding: 4px;
        z-index: 1000;

        .context_menu_items {
          list-style: none;
          padding: 0;
          margin: 0;

          .context_menu_item {
            height: 36px;
            border-radius: 5px;
            padding: 4px 4px;
            display: flex;
            align-items: center;

            .context_menu_item_icon {
              font-size: 16px;
              margin-right: 5px;
            }

            .context_menu_item_text {
              font-size: 15px;
              color: #504e4e;
            }
          }

          .context_menu_item:hover {
            background-color: rgba(132, 133, 141, 0.08);
          }
        }
      }
    }
    .demo-image__preview {
      height: 170px;
      width: 170px;
      margin-right: 10px;
    }
  }
}
</style>
